<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>城市物流配送系统 </title>
	<link href="../js/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet">
	<link rel="stylesheet" href="../source/arcgis/arcgis_js_api/library/3.9/3.9compact/js/dojo/dijit/themes/claro/claro.css">
	<link href="../source/arcgis/arcgis_js_api/library/3.9/3.9compact/js/esri/css/esri.css" rel="stylesheet" type="text/css" />
	<link href="../style/main.css" type="text/css" rel="stylesheet">

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=qG1UjK1GUyDjKQoPCY7V6bxR"></script>
</head>
<body>
	<div class="container-fluid p0" style="font-size:17px;">
	<nav class="navbar navbar-default header" role="navigation"> 
	    <!-- Brand and toggle get grouped for better mobile display -->
	    <div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
				<span class="sr-only">toggle</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-map-marker"></span> 城市物流配送路径规划系统 <span class="badge">Beta</span></a>
	    </div>
	    <!-- Collect the nav links, forms, and other content for toggling -->
	    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav navbar-right">
				<li><a href=""><span class="glyphicon glyphicon-user"></span> 管理员，你好！</a></li>
				<li class="dropdown">
				<a href="" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> 操作 <span class="caret"></span></a>
					<ul class="dropdown-menu" role="menu">
						<li><a href="" data-toggle="modal" data-target="#sign">用户注册</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="" data-toggle="modal" data-target="#myModal">用户登录</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="" data-toggle="modal" data-target="#">注销登录</a></li>
					</ul>
				</li>
			</ul>
			<ul class="nav navbar-nav">
				<li><a href="../trafficGIS"> <span class="glyphicon glyphicon-eye-open"></span> 流量预测</a></li>
				<li><a href="bus/1.html" target="bus"><span class="glyphicon glyphicon-plane"></span> 公交</a></li> 

				<li class="dropdown">
					<a href="../" class="dropdown-toggle" data-toggle="dropdown" ng-click="clearVrp()"><span class="glyphicon glyphicon-random"></span> 物流配送
						<b class="caret"></b>
					</a>
					<ul class="dropdown-menu">
						<li><a href="#/dataform"> 参数设置</a></li>
						<li class="divider"></li>
						<li><a href="#/guide">最短路径</a></li>
						<li class="divider"></li>
						<li><a href="#/search">条件查询</a></li>
					</ul>
				</li>

				<li><a href="../#search"><span class="glyphicon glyphicon-search"></span> 条件查询</a></li> 
				<li class="dropdown">
					<a href="../" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-tasks"></span> 信息管理
						<b class="caret"></b>
					</a>
					<ul class="dropdown-menu">
						<li><a href="#/goods">货物信息</a></li>
						<li class="divider"></li>
						<li><a href="#/car">车辆信息</a></li>
						<li class="divider"></li>
						<li><a href="#/driver">驾驶员信息</a></li>	
						<li class="divider"></li>
						<li><a href="">配送点信息</a></li>
						<li class="divider"></li>
						<li><a href="">配送中心信息</a></li>
						<li class="divider"></li>
						<li><a href="" data-toggle="modal" data-target="#dataUp">数据导入</a></li>
					</ul>
				</li> 
				<li class="dropdown">
					<a href="../" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-asterisk"></span> 统计分析
						<b class="caret"></b>
					</a>
					<ul class="dropdown-menu">
						<li><a href="#/graph">货物配送数量统计分析</a></li>
						<li class="divider"></li>
						<li><a href="#/graph2">货物配送费用统计分析</a></li>
					</ul>
				</li> 

				<li class="dropdown">
					<a href="../" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-inbox"></span> 公交调度
						<b class="caret"></b>
					</a>
					<ul class="dropdown-menu">
						<li><a href="#/busArrange">排班管理</a></li>
						<li class="divider"></li>
						<li><a href="" data-toggle="modal" data-target="#setOffBus">发车调度</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="" data-toggle="modal" data-target="#BAOCHE">添加包车信息</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="" data-toggle="modal" data-target="#FANGKONG">添加放空调度信息</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="" data-toggle="modal" data-target="#QUJIAN">添加区间调度信息</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="" data-toggle="modal" data-target="#CHELIANG">添加车辆信息</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="" data-toggle="modal" data-target="#XGCL">修改车辆信息</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="" data-toggle="modal" data-target="#FKDD">放空调度</a></li>
						<!-- <li><a href="#/">其他</a></li> -->
					</ul>
				</li> 
			</ul>
			
			<!-- <iframe name="bus" style="height: 1154px; width: 982px" src="bus/1.html" frameborder="0" scrolling="no">
			      		</iframe>   -->  
	    </div><!-- /.navbar-collapse -->  
	</nav>
</div>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");

	map.centerAndZoom(new BMap.Point(120.072006,30.250863), 17);
	map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
	map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT})); 
	map.addControl(new BMap.NavigationControl()); 
	map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL})); 
	map.setZoom(14);
	map.enableScrollWheelZoom(true);

	var myP1 = new BMap.Point(120.028152,30.217769);    //起点
	var myP2 = new BMap.Point(120.14445,30.276459);    //终点
	var myIcon = new BMap.Icon("./bus1.png", new BMap.Size(65, 70), {    //小车图片
		//offset: new BMap.Size(0, -5),    //相当于CSS精灵
		imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
	  });
	var driving2 = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});    //驾车实例
	driving2.search(myP1, myP2);    //显示一条公交线路


	var geoc = new BMap.Geocoder();    

	map.addEventListener("click", function(e){        
		var pt = e.point;
		geoc.getLocation(pt, function(rs){
			var addComp = rs.addressComponents;
			alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
		});        
	});

	window.run = function (){
		var driving = new BMap.DrivingRoute(map);    //驾车实例
		driving.search(myP1, myP2);
		driving.setSearchCompleteCallback(function(){
			var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组
			var paths = pts.length;    //获得有几个点

			var carMk = new BMap.Marker(pts[0],{icon:myIcon});
			map.addOverlay(carMk);
			i=0;
			function resetMkPoint(i){
				carMk.setPosition(pts[i]);
				if(i < paths){
					setTimeout(function(){
						i++;
						resetMkPoint(i);
					},200);
				}
			}
			setTimeout(function(){
				resetMkPoint(5);
			},200)

		});
	}

	var tt = setInterval(function(){
		run();
	},6500);

	setTimeout(function(){
		clearInterval(tt)
	},20000)
</script>
